<template>
  <div class="echarts" ref="echartsRef" :style="{
    width: '600px',
    height: '500px'
  }"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import userCount from '@/stores/userCount'
import { storeToRefs } from "pinia";
import * as echarts from 'echarts'
export default defineComponent({
  setup() {
    const store = userCount()
    const { dataInfo } = storeToRefs(store)

    const data = ref(dataInfo)
    /*   console.log(data)
      console.log(data.value.countMonth) */
    const echartsRef = ref<HTMLElement>()
    onMounted(() => {
      //初始化echarts实例init（ dom ，'主题' ，其余参数如：{ renderer:'svg' }）
      const myEcharts = echarts.init(echartsRef.value!)
      //要操作的配置
      const option = {
        title: {
          text: '待办情况统计'
        },
        // 配置提示信息
        tooltip: {},

        dataset: {
          source: [
            ['product', '已完成', '总量', ''],
            ['当天', data.value.doneDay, data.value.countDay],
            ['本周', data.value.doneWeek, data.value.countWeek],
            ['当月', data.value.doneMonth, data.value.countMonth],
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      }
      //设置配置
      myEcharts.setOption(option)
    })

    return { echartsRef }
  }

})
</script>

<style>

</style>
